<template>
    <view class="bannerbox">
        <swiper :indicator-dots="propData.length > 0" :indicator-color="indicator_color" :indicator-active-color="indicator_active_color" :autoplay="propData.length > 0" :circular="circular" class="banner" v-if="propData.length > 0">
            <block v-for="(item, index) in propData" :key="index">
                <swiper-item>
                    <image :src="item.images_url" mode="widthFix" :data-value="item.event_value" :data-type="item.event_type" @tap="banner_event"></image>
                </swiper-item>
            </block>
        </swiper>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
		return {
		    indicator_dots: false,
		    indicator_color: 'rgba(0, 0, 0, .3)',
		    indicator_active_color: '#ff6482',
		    autoplay: true,
		    circular: true
		};
    },
    props: {
        propData: [Array, Object]
    },
    methods: {
        banner_event(e) {
            app.globalData.operation_event(e);
        }
    }
};
</script>
<style>
.bannerbox {
    background: #fff
        url('')
        no-repeat center top;
    background-size: 100% auto;
}
.banner {
    background: #fff;
    margin-bottom: 20rpx;
    width: 702rpx;
    margin: 0 auto;
    /*box-shadow: 6rpx 8rpx 20rpx 6rpx rgba(240,240,240,0.5), -6rpx 8rpx 10rpx 6rpx rgba(240,240,240,0.5);*/
}
.banner image {
    min-width: 100%;
}
.banner,
.banner image {
    height: 345rpx !important;
    border-radius: 15rpx;
    overflow: hidden;
}
</style>
